<template>
  <el-dialog title="按二维表添加商品" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-row class="row-bg">
      <el-form inline size="mini" @submit.native.prevent>
        <el-button size="mini" type="primary" style="margin-right: 15px;" @click="checkThisList">选择</el-button>
        <el-form-item label="商品类别">
          <el-input v-model="dataParams.ctgName" disabled></el-input>
        </el-form-item>
        <el-form-item label="制造商">
          <el-input v-model="dataParams.supplyName" disabled></el-input>
        </el-form-item>
        <el-form-item label="商品品种">
          <el-input v-model="dataParams.brandName" readonly>
            <el-button slot="append" @click="selectBrand">选择</el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <table style="text-align: center;width: auto;" v-if="tableVisible">
      <tr>
        <th style="width: 80px;" class="miui-table-thead">球镜/柱镜</th>
        <th v-for="item in postGlassList" class="miui-table-thead">{{item}}</th>
      </tr>
      <tr v-for="(item,ballIndex) in ballGlassList">
        <td class="miui-table-thead">{{item}}</td>
        <td v-for="(postItem,postIndex) in postGlassList">
          <template v-for="(term,termIndex) in allList">
            <el-form v-if="term.mirrorBall == item && term.columnMirror == postItem">
              <el-input v-model="term.quantity" :ref="'lens'+ballIndex + postIndex" :disabled="!term.goodsId" @input="getValHandle" @keyup.enter.native="convert('enter',ballIndex,postIndex)" @keyup.left.native="convert('left',ballIndex,postIndex)" @keyup.right.native="convert('right',ballIndex,postIndex)" @keyup.up.native="convert('up',ballIndex,postIndex)" @keyup.down.native="convert('down',ballIndex,postIndex)"></el-input>
            </el-form>
          </template>
        </td>
      </tr>
    </table>
    <search-brand v-if="brandVisible" ref="brandDialog" @refreshData="getBrandData"></search-brand>
  </el-dialog>
</template>

<script>
  import { remote } from '@/api/admin/dict'
	import { removeRepeat } from '@/util/tools'
  import {getGoodsList} from '@/api/eims/goods'
  import SearchBrand from '@/components/business/SearchBrand'
  export default {
    data() {
      return {
        visible: false,
        dataParams: {},
        supplyId: '',
        supplyName: '',
        ballGlassList: [],
        postGlassList: [],
        allList: [],
				selectList: [],			//	之前选择的商品列表
        brandVisible: false,
        tableVisible: false
      }
    },
    components:{
      SearchBrand
    },
    methods: {
      init(data) {
        this.visible = true
        this.dataParams = data

        this.tableVisible = false
        this.dataParams.brandId = ''
        this.dataParams.brandName = ''
        this.ballGlassList = []
        this.postGlassList = []
        this.allList = []
        this.selectList = data.list
      },
      getBrandData(data) {
        this.$set(this.dataParams,'brandId',data.id)
        this.$set(this.dataParams,'brandName',data.name)
        this.packageList()
      },
      packageList() {
        let data = {
          ctgId: this.dataParams.ctgId,
          supplyId: this.dataParams.supplyId,
          brandId: this.dataParams.brandId
        }
        getGoodsList(data).then(response => {
          if(response.data.code == '0'){
            let responseData = response.data.data
            let list = []
            responseData.list.forEach(item => {
              item.goodsId = item.id
            })
            this.tableVisible = true
            this.ballGlassList = responseData.mirrorBallList
            this.postGlassList = responseData.columnMirrorList
            this.ballGlassList.forEach(item => {
              for (let i = 0; i < this.postGlassList.length; i++) {
                let obj = {}
                obj.mirrorBall = item
                obj.columnMirror = this.postGlassList[i]
                obj.quantity = ''
                list.push(obj)
              }
            })
            this.allList = list
            responseData.list.forEach((item,index) => {
              for(let i = 0; i < this.allList.length; i++){
                if(item.mirrorBall == this.allList[i].mirrorBall && item.columnMirror == this.allList[i].columnMirror){
                  this.allList[i].goodsId = item.goodsId
                  this.allList[i].goodsBarcode = item.barcode + '00000000'
                  this.allList[i].code = item.code
                  this.allList[i].color = item.color
                  this.allList[i].colorNumber = item.colorNumber
                  this.allList[i].name = item.name
                  this.allList[i].spec = item.spec
                  this.allList[i].viewGoodsName = item.viewGoodsName
                  this.allList[i].toTheLight = item.toTheLight
                  this.allList[i].refractiveIndex = item.refractiveIndex
                }
                for(let j = 0; j < this.selectList.length; j++){
                  if(this.allList[i].goodsId == this.selectList[j].goodsId){
                    this.allList[i].quantity = this.selectList[j].quantity
                  }
                }
              }
            })
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      selectBrand() {
        this.brandVisible = true
        let data = {
          ctgId: this.dataParams.ctgId,
          supplyId: this.dataParams.supplyId
        }
        this.$nextTick(() => {
          this.$refs.brandDialog.init(data)
        })
      },
      getValHandle(val) {
        // console.log(val)
      },
      // 切换输入框
      convert(type,ballIndex,postIndex){
        let ballIndex1 = ballIndex
        let postIndex1 = postIndex
        switch(type){
          case 'enter':
            if(ballIndex1 != this.ballGlassList.length - 1){
              if(postIndex1 != this.postGlassList.length - 1){
                postIndex1 += 1
              }else{
                ballIndex1 += 1
                postIndex1 = 0
              }
            }else{
              if(postIndex1 != this.postGlassList.length - 1){
                postIndex1 += 1
              }else{
                return false
              }
            }
            if(this.$refs['lens' + ballIndex1 + postIndex1][0].disabled){
              this.convert('enter',ballIndex1,postIndex1)
            }else{
              this.$refs['lens' + ballIndex1 + postIndex1][0].focus()
            }
          break;
          case 'left':
            if(ballIndex1 != 0){
              if(postIndex1 != 0){
                postIndex1 -= 1
              }else{
                ballIndex1 -= 1
                postIndex1 = this.postGlassList.length - 1
              }
            }else{
              if(postIndex1 != 0){
                postIndex1 -= 1
              }else{
                return false
              }
            }
            if(this.$refs['lens' + ballIndex1 + postIndex1][0].disabled){
              this.convert('left',ballIndex1,postIndex1)
            }else{
              this.$refs['lens' + ballIndex1 + postIndex1][0].focus()
            }
          break;
          case 'right':
            if(ballIndex1 != this.ballGlassList.length - 1){
              if(postIndex1 != this.postGlassList.length - 1){
                postIndex1 += 1
              }else{
                ballIndex1 += 1
                postIndex1 = 0
              }
            }else{
              if(postIndex1 != this.postGlassList.length - 1){
                postIndex1 += 1
              }else{
                return false
              }
            }
            if(this.$refs['lens' + ballIndex1 + postIndex1][0].disabled){
              this.convert('right',ballIndex1,postIndex1)
            }else{
              this.$refs['lens' + ballIndex1 + postIndex1][0].focus()
            }
          break;
          case 'up':
            if(ballIndex1 != 0){
              ballIndex1 -= 1
            }else{
              return false
            }
            if(this.$refs['lens' + ballIndex1 + postIndex1][0].disabled){
              this.convert('up',ballIndex1,postIndex1)
            }else{
              this.$refs['lens' + ballIndex1 + postIndex1][0].focus()
            }
          break;
          case 'down':
            if(ballIndex1 != this.ballGlassList.length - 1){
              ballIndex1 += 1
            }else{
              return false
            }
            if(this.$refs['lens' + ballIndex1 + postIndex1][0].disabled){
              this.convert('down',ballIndex1,postIndex1)
            }else{
              this.$refs['lens' + ballIndex1 + postIndex1][0].focus()
            }
          break;
        }

      },
      checkThisList() {
        let list = []
        this.allList.forEach(item => {
          if (item.quantity > 0) {
            list.push(item)
          }
        })
				this.selectList = removeRepeat(this.selectList.concat(list),'goodsId')

        list = removeRepeat(list.concat(this.selectList),'goodsId')

        this.$emit('refreshData',list)
        this.visible = false
      }
    },
  }
</script>

<style lang="scss" scoped>
  .row-bg {
    background-color: #cadee8;
    padding-left: 15px;
    padding-top: 5px;
    margin-bottom: 15px;
  }
  .el-form-item {
    margin-bottom: 0;
  }

  table {
    width: auto;
    border-collapse: collapse;
  }

  table tr th, table tr td {
    width: 60px;
    border: solid 1px #e7e7e7;
  }
  .miui-table-thead {
    background-color: #cadee8;;
  }
</style>
